<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1{
				width:100px;
				height:100px;
				background: red;
				position:absolute;
				top:100px;
				left:0px;
			}
			#div2{
				width:100px;
				height:100px;
				background: blue;
				position:absolute;
				top:300px;
				left:0px;
			}
		</style>
	</head>
	<body>
		<script>
			window.onload = function(){
				var oDiv1 = document.getElementById("div1");
				var oDiv2 = document.getElementById("div2");
				var btns = document.getElementsByTagName('input');
//				var timer = null;
				btns[0].onclick = function(){
					move(oDiv1,10,800);
				}
				btns[1].onclick = function(){
					move(oDiv2,20,800);
				}
				
				function move(obj,speed,target){
					clearInterval(obj.timer);
					obj.timer = setInterval(function(){
						var oldLeft = obj.offsetLeft;
						var newLeft = oldLeft + speed;
						if(oldLeft>target){
							clearInterval(obj.timer);
							newLeft = target;
						}
						obj.style.left = newLeft + 'px';
					},1000/60);
				}
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
			}
		</script>
		<input type="button" value="开始div1" />
		<input type="button" value="开始div2" />
		<div id="div1"></div>
		<div id="div2"></div>
	</body>
</html>
